<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">

            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="100">
        <router-link tag="div" :to="routerPath('issueRecord')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">基础信息</p>
            <div class="analyItemCon">
                <p class="col-md-6">
                    <span class="cLightGray pr8">卡号</span><span>{{ leftInfo.card }}</span>
                </p>
                <p class="col-md-6" :title="leftInfo.encode_device_name"><span class="cLightGray pr8">设备名称</span><span>{{ leftInfo.encode_device_name  }}</span></p>

                <p class="col-md-6">
                    <span class="cLightGray pr8">设备状态</span>
                    <span v-if="leftInfo.state === 0">在线</span>
                    <span v-else-if="leftInfo.state === 1">不在线</span>
                    <span v-else>未检测</span>
                </p>
                <p class="col-md-6" :title="leftInfo.camera_name"><span class="cLightGray pr8">监控名称</span><span>{{ leftInfo.camera_name }}</span></p>
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">开拍时间</span><span>{{cameraInfo.begin_date}}点</span></p>
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">结束时间</span><span>{{cameraInfo.end_data}}点</span></p>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('issueIssue')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">出库</p>
            <div class="analyItemCon">
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">单号</span><span>{{ orderInfo.order_no }}</span></p>
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">点位</span><span>{{ orderInfo.name }}</span></p>
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">监理</span><span></span>{{ orderInfo.order_checker_name }}</p>
                <p class="col-md-6" v-if="Number(leftInfo.camera_state) === 1 "><span class="cLightGray pr8">出库时间</span><span></span>{{ orderInfo.create_date }}</p>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('issueRecycling')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">收回</p>
            <div class="analyItemCon">
                <p class="col-md-12"><span class="cLightGray pr8">时间</span>{{ recoveryInfo.create_date }}<span></span></p>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('issueUsage')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">使用记录</p>
            <div class="analyItemCon">
                <p class="col-md-6"><span class="cLightGray pr8">共使用</span><span>{{ useCountInfo.count }}</span></p>
                <!-- <p class="col-md-6"><span class="cLightGray pr8">项目</span><span>{{  }}</span></p> -->
            </div>
        </router-link>
    </div>
    <div class="layerRtb-footer" style="padding-left: 0px;">
        <router-link tag="div" :to="routerPath('issueHander')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getSauxiliaryInfo, getOrderInfo, getRecoveryDate, getUseCount } from '../Resources/Api/index'
export default {
    data () {
        return {
            cameraInfo: {},
            orderInfo: {},
            recoveryInfo: {},
            useCountInfo: {}
        }
    },
    created () {
        if (this.leftInfo.camera_state === 1) {
            this._getSauxiliaryInfoFn()
            this._getOrderInfoFn()
        }
        if (this.leftInfo.camera_state === 2) {
            this._getRecoveryDateFn()
        }
        this._getUserCountInfoFn()
    },
    methods: {
        ...mapMutations({
            setTwoToThree: `SET_TWO_TO_THREE_INFO`
        }),
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        //  按监控编号查询附属信息
        _getSauxiliaryInfoFn () {
            let _this = this
            let params = {
                camera: _this.leftInfo.camera
            }
            getSauxiliaryInfo(params).then(result => {
                if (result.data.StatusCode === 0) {
                    _this.cameraInfo = result.data.Body.orderList[0]
                    this.setTwoToThree(_this.cameraInfo)
                }
            }).catch(err => {
                console.log(`按监控编号查询附属信息接口错误，错误内容${err}`)
            })
        },
        _getOrderInfoFn () {
            let _this = this
            let params = {
                camera: this.leftInfo.camera
            }
            getOrderInfo(params).then(result => {
                _this.orderInfo = result.data.Body.orderMap
                _this.setTwoToThree({
                    ...this.twoToThreeInfo,
                    ..._this.orderInfo
                })
            }).catch(err => {
                console.log(`按监控编号查询项目信息接口错误，错误内容${err}`)
            })
        },
        _getRecoveryDateFn () {
            let _this = this
            let params = {
                camera: this.leftInfo.camera
            }
            getRecoveryDate(params).then(result => {
                _this.setTwoToThree({
                    ...this.twoToThreeInfo,
                    ..._this.orderInfo
                })
                _this.recoveryInfo = result.data.Body.recoveryMap
                this.setTwoToThree(_this.recoveryInfo)
            }).catch(err => {
                console.log(`按监控编号查询监控的回收时间接口错误，错误内容${err}`)
            })
        },
        _getUserCountInfoFn () {
            let _this = this
            let params = {
                camera: this.leftInfo.camera
            }
            getUseCount(params).then(result => {
                _this.useCountInfo = result.data.Body.useCountMap
            }).catch(err => {
                console.log(`按监控编号查询监控的使用次数接口错误，错误内容${err}`)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo'])
    },
    watch: {
        leftInfo () {
            this.setTwoToThree({})
            if (this.leftInfo.camera_state === 1) {
                this._getSauxiliaryInfoFn()
                this._getOrderInfoFn()
            }
            if (this.leftInfo.camera_state === 2) {
                this._getRecoveryDateFn()
            }
            this._getUserCountInfoFn()
        }
    }
}
</script>
